import { Button, Table, Popconfirm, Popover } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useContext, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import { TableInfo } from '../../data'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'

import { reportReviewContext } from '../../_context'
import { dictValues } from '@/store/dicts'

export default () => {
  const dictValuesList = useRecoilValue(dictValues)
  const navigte = useNavigate()
  const { tableList, task, goBack, hospitals, handleGoBack } = useContext(reportReviewContext)
  console.log('tasktasktasktask🚀🚀🚀🚀', task)
  // 样式
  const computedColor = (status: string) => {
    switch (status) {
      case '1':
        return {
          backgroundColor: '#EEFFFB',
          color: '#51BCA5',
        }
      case '2':
        return {
          backgroundColor: '#FFF1F2',
          color: '#EB5F62',
        }
      case '0':
        return {
          backgroundColor: '#F2F2F2',
          color: '#8E8E8E',
        }

      default:
        break
    }
  }

  const creatReason = (item: string) => (
    <div style={{ whiteSpace: 'pre-wrap' }} className={styles.reason}>
      {item}
    </div>
  )

  const columns: ColumnsType<TableInfo> = useMemo(
    () => [
      {
        title: '病区',
        dataIndex: 'wardName',
        align: 'center',
      },
      {
        title: '提交时间',
        dataIndex: 'reportTime',
        align: 'center',
      },
      {
        title: '状态',
        align: 'center',
        render: (_, value) => (
          <>
            {value.status === '2' && value.returnReason ? (
              <>
                <Popover content={creatReason(value.returnReason!)} title='退回原因'>
                  <div className={styles.tag} style={computedColor(value.status!)}>
                    {dictValuesList.report_status.find((item) => item.value === value.status)?.label}
                  </div>
                </Popover>
              </>
            ) : (
              <>
                <div className={styles.tag} style={computedColor(value.status)}>
                  {dictValuesList.report_status.find((item) => item.value === value.status)?.label}
                </div>
              </>
            )}
          </>
        ),
      },
      {
        title: '操作',
        align: 'center',
        render: (_, record) => (
          <div className={styles.btns}>
            {record.status !== '0' && (
              <Button
                onClick={() => {
                  navigte('/data-review/hospital-preview', {
                    state: { ...record, task, isShowBtn: 'N', readyOnly: true },
                  })
                }}
                type='link'
                icon={<IconSvg name='look' />}
              >
                查看
              </Button>
            )}
            {record.status === '1' && (
              <>
                {record.wardName === '全院' ? (
                  <>
                    <Popconfirm
                      title='确定退回吗?'
                      onConfirm={() => handleGoBack(record.dataId)}
                      okText='确定'
                      cancelText='取消'
                      disabled={hospitals?.isApply === 'Y'}
                    >
                      <Button disabled={hospitals?.isApply === 'Y'} type='link' icon={<IconSvg name='goback' />} danger>
                        退回
                      </Button>
                    </Popconfirm>
                  </>
                ) : (
                  <>
                    <Button
                      type='link'
                      disabled={hospitals?.isApply === 'Y'}
                      onClick={() => goBack(record.dataId)}
                      icon={<IconSvg name='goback' />}
                      danger
                    >
                      退回
                    </Button>
                  </>
                )}
              </>
            )}
            {hospitals?.isApply === 'Y' && (
              <Button
                onClick={() => {
                  navigte('/data-review/hospital-preview', {
                    state: { ...record, task, isShowBtn: hospitals?.isApply, zkjType: 'Y' },
                  })
                }}
                type='link'
                icon={<IconSvg name='look' />}
              >
                申请修改
              </Button>
            )}
          </div>
        ),
      },
    ],
    [task, tableList],
  )

  return (
    <Table
      // loading={loading}
      style={{ marginTop: '24px' }}
      pagination={false}
      columns={columns}
      dataSource={tableList}
      rowKey={'dataId'}
    />
  )
}
